<template>
  <div class="wrap">
      <div class="container w">
        <div class="l">
          <ul>
              <li>欢迎来访淘宝，优质网站模板提供商！</li>
               <li>
                <router-link to="/mall/login">
                  <el-link :underline="false"> 请登录</el-link>
                </router-link>
              </li>
               <li>
                <router-link to="/mall/login">
                  <el-link :underline="false"> 免费注册</el-link>
                </router-link>
              </li>
          </ul>
        </div>
        <div class="r">
          <ul>
             <li>
                <router-link to="/mall">
                  <el-link :underline="false"> 
                    <i class="el-icon-s-home"></i>
                    淘宝首页
                    </el-link>
                </router-link>
              </li>
              <li>
                 <el-dropdown>
              <span class="el-dropdown-link">
                <el-link :underline="false"> 
                    <i class="el-icon-s-home"></i>
                    我的淘宝
                     <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-link>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/mall/trade" >已买到的宝贝</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                   <router-link to="/mall/account" >个人中心</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                   <router-link to="/mall/footprint" >我的足迹</router-link>
                </el-dropdown-item>
                <!-- <el-dropdown-item>售后服务</el-dropdown-item> -->
                <!-- <el-dropdown-item>我的优惠券</el-dropdown-item> -->
                <el-dropdown-item>我的下级用户</el-dropdown-item>
                <el-dropdown-item>我的评价</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
              </li>
              <li>
                <router-link to="/mall/cart">
                  <el-link :underline="false"> 
                    <i class="el-icon-shopping-cart-1"></i>
                    购物车
                    </el-link>
                </router-link>
              </li>
              <li>
                <router-link to="/mall/favorites">
                  <el-link :underline="false"> 
                    <i class="el-icon-star-on"></i>
                    收藏夹
                    </el-link>
                </router-link>
              </li>
              <li>
              <el-dropdown>
              <span class="el-dropdown-link">
                <el-link :underline="false"> 
                     <i class="el-icon-user-solid" ></i>
                    客户服务
                     <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-link>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>联系客服</el-dropdown-item>
                <el-dropdown-item>帮助中心</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
                 </li>
              <li>
               <el-dropdown>
              <span class="el-dropdown-link">
                <el-link :underline="false"> 
                     <i class="el-icon-s-shop" ></i>
                    卖家中心
                     <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-link>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                   <router-link to="/mall/openShop" >开店入驻</router-link>
                </el-dropdown-item>
                <el-dropdown-item>出售中的宝贝</el-dropdown-item>
                <el-dropdown-item>已卖出的宝贝</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
              </li>
          </ul>
        </div>
      </div>
   </div>
</template>

<script>
export default {
  name: 'SiteNav',
  data () {
    return {
    }
  },
  methods: {
   
  }
}
</script>

// <style lang="scss" scoped>

.w{
  width: 1200px;
  margin:0 auto;
  }
.wrap{
  background-color: #f7f7f7;
  border-bottom: 1px solid rgb(235, 232, 232);
}
.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  color: #444;
  font-size: 13px;
  ul{
    display: flex;
    li{
      margin: 0px 10px;
    }
  }
}

::v-deep .el-divider__text,.el-link{
  font-weight: 400;
    font-size: 13px;
}

.el-dropdown-link {
  cursor: pointer;
}
.el-dropdown {
  display: inline-block;
  position: relative;
  font-size: 13px;
  .el-icon--right {
    margin-left: 0px;
  }
}
</style>
